export default {
  data() {
    return {
      // 当前页码
      pagenum: 1,
      // 每页显示多少条数据
      pagesize: 5,
      // 总条数
      total: 0,
      // 分类数据
      treeData: [],

      // 添加分类对话框可见性
      addCateDialogVisible: false,

      // editdialog 对话框 是否可见
      editDialogVisible: false,

      // 每行数据,每一列的数据
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name',
          width: '200px'
        },
        {
          label: '是否有效',
          prop: 'cat_deleted',
          width: '200px',
          // 表示要使用模板进行渲染
          type: 'template',
          template: 'isok'
        },
        {
          label: '排序',
          prop: 'cat_level',
          width: '300px'
        },
        {
          label: '操作',
          prop: 'name',
          width: '200px',
          // 表示要使用模板进行渲染
          type: 'template',
          template: 'btns'
        }
      ],

      // 分类表单
      addCateRuleForm: {
        // 分类名称
        cat_name: ''
      },
      // 级联选择器数据
      selectedOptions2: [],
      // 存储选中的ID
      selectedOptions1: [],

      // 添加分类的校验规则
      addCateRules: {
        cat_name: [{ required: true, message: '请输入分类名称', trigger: 'change' }]
      },
      // 级联选择器配置属性
      addCateitemOption: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },

      // 分类表单
      editRuleForm: {
        cat_name: '',
        cat_id: ''
      }
    }
  },
  // 钩子函数
  created() {
    this.getCateData()
  },
  methods: {
    async getCateData() {
      const { data: res } = await this.$http.get('categories', {
        params: {
          type: 3,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      })
      // console.log(res)
      // console.log(res.data.result)
      // 判断响应值
      if (res.meta.status !== 200) return this.$message.error('获取数据失败')
      // 获取数据成功，把数据保存
      this.treeData = res.data.result
      // 获取数据总条数
      this.total = res.data.total
      // 成功提示
      this.$message.success('获取数据成功')
    },
    // 当前页码值发生改变时
    handleCurrentChange(nowPage) {
      // console.log(nowPage)
      // 根据当前页码值获取数据
      this.pagenum = nowPage
      // 重新获取数据
      this.getCateData()
    },
    // 显示添加分类对话框
    async showCateDialog() {
      // 请求数据
      const { data: res } = await this.$http.get('categories', {
        params: {
          type: 2
        }
      })
      // 判断
      if (res.meta.status !== 200) return this.$message.error('获取信息失败')
      // 获取数据成功，把数据保存到三级选择器
      this.selectedOptions2 = res.data
      this.addCateDialogVisible = true
    },
    // 对话框关闭事件，重置表单
    resetAddCateForm() {
      this.$refs.addRuleFormRef.resetFields()
      // 重置选择器
      // console.log(this.selectedOptions1)
      this.selectedOptions1 = []
    },
    // 点击按钮添加分类
    async addCate() {
      // 假设父级ID为0
      let PID = 0
      // 假设当前层级为0
      let LV = 0
      // 判断，如果级联选择框的数据值不为空,设置父级ID和当前等级
      if (this.selectedOptions1.length !== 0) {
        // 父级ID = 数组长度-1
        PID = this.selectedOptions1[this.selectedOptions1.length - 1]
        // 当前层级 = 数组长度
        LV = this.selectedOptions1.length
        console.log(PID, LV, this.selectedOptions1)
      }

      // 表单验证
      this.$refs.addRuleFormRef.validate(async valid => {
        if (!valid) return
        // 发请求
        const { data: res } = await this.$http.post('categories', {
          cat_pid: PID,
          cat_name: this.addCateRuleForm.cat_name,
          cat_level: LV
        })
        console.log(res)
        if (res.meta.status !== 201) return this.$message.error('添加数据失败')
        // 获取数据成功
        this.$message.success('succ')
        // 刷新页面
        this.getCateData()
        this.addCateDialogVisible = false
      })
    },

    // 编辑功能
    async showEditCateDialog(scope) {
      // console.log(scope.row.cat_id)
      // 发请求 修改数据
      const { data: res } = await this.$http.get(`categories/${scope.row.cat_id}`)
      // 判断
      if (res.meta.status !== 200) return this.$message.error('获取数据错误')
      // 成功获取数据，把查询到的数据保存
      this.editRuleForm.cat_name = res.data.cat_name

      // 显示对话框
      this.editDialogVisible = true

      // 设置ID
      this.editRuleForm.cat_id = scope.row.cat_id
    },

    // 点击按钮发送 修改分类信息
    editCate() {
      this.$refs.editForm.validate(async val => {
        if (!val) return
        const { data: res } = await this.$http.put(`categories/${this.editRuleForm.cat_id}`, {
          cat_name: this.editRuleForm.cat_name
        })

        // 判断
        if (res.meta.status !== 200) return this.$message.error('修改失败')

        // 修改成功：属性数据 关闭对话框
        this.getCateData()
        this.editDialogVisible = false
      })
    },

    // 删除分类
    async removeCate(scope) {
      console.log(scope.row.cat_id)
      const ret = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      // console.log(ret)
      if (ret !== 'confirm') {
        return this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }

      // 确认删除
      const { data: res } = await this.$http.delete(`categories/${scope.row.cat_id}`)
      // 判断
      if (res.meta.status !== 200) return this.$message.error('删除数据失败')

      // 成功删除，刷新数据
      this.getCateData()

      // 提示
      this.$message.success('成功删除')
    }
  }
}
